import Taro, {Component, Config} from "@tarojs/taro";
import {View, Picker, Image, Text, Switch, Input, Form, Button} from "@tarojs/components";
import PageFooterInfo from '../../components/PageFooterInfo'
import {AtImagePicker} from 'taro-ui'
import {enterpriseQualificationArr, getRuntime,} from '../../utils/common'
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import './index.less'
import './spage1_step_three.less'
import right from '../../assets/img/right.png'
import point_on from '../../assets/img/icon_23.png'
import line_on from '../../assets/img/icon_24.png'


// 工程金融中心-计算结果
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Page1_step_two extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    qualificationLevelArr: enterpriseQualificationArr, // 资质等级 ,
    qualificationLevel: '', // 资质等级 ,
    relatedInformationArr: [], // 相关资料 ,
    relatedInformation: '', // 相关资料 ,
    personInCharge: '', // 负责人 ,
    phoneNumber: '', // 联系电话 ,
    emailAddress: '', // 邮箱地址 ,
    isChooseBank: false, // 是否对银行有要求 ,
    bankNameArr: [], // 银行名称 ,
    currentBankIndex: 0,
    bankName: '', // 银行名称 ,
    isAboutArchitecture: false, // 是否跟建筑有关 ,

    loading: false,
    id: null
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '工程保函中心'})
    this.getAllBank()
    let projectInsurance = getRuntime().getStorage('projectInsurance')
    if(!projectInsurance) {
      getRuntime().showToast('参数错误, 请重试~')
      setTimeout( () => {
        getRuntime().navigateTo('/pages/finance/page1');
      },2000)
      return
    }
    this.setState({ id: parseInt(projectInsurance.id) })
  }

  getAllBank() {
    let {userStore} = this.props.stores
    userStore.getBanks({
      callback: res => {
        let allBank = toJS(res.items)
        if (allBank) {
          this.setState({
            bankNameArr: allBank
          })
        }
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onChangeBank(type: string, e) {
    this.setState({
      [type]: e.detail.value
    })
  }

  onChangePicker(type: string, e) {
    this.setState({
      [type]: this.state[type + 'Arr'][e.detail.value]
    })
  }

  onChangeImg(type: string, e) {
    if (e.length <= 0) {
      return false
    }
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type]: res.join(','),
        [type + 'Arr']: e
      })
    })
  }

  changeBank(e) {
    this.setState({
      currentBankIndex: e.detail.value,
      bankName: this.state.bankNameArr[e.detail.value]['bankName']
    })
  }

  submit(e) {
    let {id, qualificationLevel, relatedInformation, isChooseBank, bankName, isAboutArchitecture} = this.state
    let {personInCharge, phoneNumber, emailAddress,} = e.detail.value
    if (!qualificationLevel) {
      getRuntime().showToast('请选择资质等级~');
      return
    }
    if (!relatedInformation) {
      getRuntime().showToast('请上传相关资料~');
      return
    }
    if (!personInCharge) {
      getRuntime().showToast('请填写负责人~');
      return
    }
    if (!phoneNumber) {
      getRuntime().showToast('请填写联系电话~');
      return
    }
    let {FinancialCenterStore} = this.props.stores
    FinancialCenterStore.saveSuretyBondInfo({
      form: {
        id,
        qualificationLevel,
        relatedInformation,
        personInCharge,
        phoneNumber,
        emailAddress,
        isChooseBank,
        bankName,
        isAboutArchitecture,
      },
      callback: (res) => {
        getRuntime().navigateTo(`/pages/finance/finance_success`)
      }
    })
  }

  componentDidHide(): void {
    // Taro.removeStorageSync('projectInsurance')
  }

  render() {
    let {isChooseBank, qualificationLevelArr, qualificationLevel, relatedInformationArr, bankNameArr, currentBankIndex} = this.state
    return (
      <View className='result-wrap' style={{'padding-top': '0', 'padding-bottom': 0}}>
        <View className='step-line'>
          <View className='step-icon'>
            <Image src={point_on} className='point' />
            <Image src={line_on} className='line'/>
            <Image src={point_on} className='point'/>
            <Image src={line_on} className='line'/>
            <Image src={point_on} className='point'/>
          </View>
          <View className={'step-content'}>
            <Text className='title color-light'>保费计算</Text>
            <Text className='title color-light'>提交资料</Text>
            <Text className='title color-light'>预约办理</Text>
          </View>
        </View>

        <Form onSubmit={this.submit.bind(this)}>
          <View className='from-wrap p0'>
            <View className='item-group'>
              <View className='input-group input-upload bbnone'>
                <View className='input-name'>上传相关资料(营业执照/保函格式/招标文件)</View>
                <AtImagePicker
                  length={4}
                  count={2}
                  showAddBtn={true}
                  files={relatedInformationArr}
                  onChange={this.onChangeImg.bind(this, 'relatedInformation')}
                />
              </View>
            </View>

            <View className='item-group pt0 pb0'>
              <View className='input-group '>
                <View className='input-name'>资质等级</View>
                <Picker className='input-picker' mode='selector' range={qualificationLevelArr}
                        onChange={this.onChangePicker.bind(this, 'qualificationLevel')}>
                  <View className='tt'>
                    {!qualificationLevel && <View className='from-input picker-con placeholder-class'>点击选择</View>}
                    {qualificationLevel && <View className='from-input picker-con'>{qualificationLevel}</View>}
                    <Image className='drop-down-icon' src={right}/>
                  </View>
                </Picker>
              </View>

              <View className='input-group input-switch'>
                <View className='input-name'>是否对银行有要求</View>
                <Switch className='switch' color='#00a0e9' name='isChooseBank'
                        onChange={this.onChangeBank.bind(this, 'isChooseBank')}/>
              </View>

              <View className={isChooseBank ? 'sub-bank sub-bank-on' : 'sub-bank'}>
                <View className='input-group '>
                  <View className='input-name'>银行</View>
                  <Picker className='input-picker' mode='multiSelector' rangeKey='bankName' range={[bankNameArr]} onChange={this.changeBank.bind(this)}>
                    <View className='tt'>
                      <View className='from-input picker-con' >{bankNameArr.length>0&&bankNameArr[currentBankIndex]['bankName']}</View>
                      <Image className='drop-down-icon' src={right} />
                    </View>
                  </Picker>
                </View>

                <View className='info color-light'>
                  要求：1、出具保函承诺书;2、董事会（股东会）决议、成员签字样本;3、反担保保证合同;4、保证额度使用申请书;5、保函收妥确认书。
                </View>
              </View>

              <View className='input-group input-switch'>
                <View className='input-name'>是否从事建筑行业</View>
                <Switch className='switch' name='isAboutArchitecture' color='#00a0e9'
                        onChange={this.onChangeBank.bind(this, 'isAboutArchitecture')}/>
              </View>
            </View>

            <View className='item-group pt0 pb0'>
              <View className='input-group'>
                <View className='input-name'>负责人</View>
                <Input className='from-input' name='personInCharge' placeholderClass='placeholder_class'
                       placeholder='请填写负责人'/>
              </View>
              <View className='input-group'>
                <View className='input-name'>联系电话</View>
                <Input className='from-input' name='phoneNumber' placeholderClass='placeholder_class'
                       placeholder='请填写联系电话'/>
              </View>
              <View className='input-group'>
                <View className='input-name'>联系邮箱</View>
                <Input className='from-input' name='emailAddress' placeholderClass='placeholder_class'
                       placeholder='请填写联系邮箱'/>
              </View>
            </View>
          </View>
          <Button className='page-submit' formType='submit'>立即预约办理</Button>
        </Form>
        <PageFooterInfo/>
        <View className='footer-block'/>

      </View>
    )
  }
}

export default Page1_step_two
